<template>
  <div id="index">
    <!--标题栏-->
    <div id="header" @click="hidden">
      <!--时间-->
      <div id="nowTime">{{ nowTime }}</div>
      <!--日期和星期-->
      <div id="nowDate">{{ nowDate }}</div>
      <span id="title">{{ nowTitleName }}智慧冰柜管理系统</span>

      <!--登录信息-->
      <div id="loader">
        <span id="name">{{ nowName }}</span>
        <img
          src="../../assets/bingguiHeadRight/关机.png"
          alt=""
          style="width: 3rem;height: 3rem; margin-top: 2rem"
          @click="getout"
        >

      </div>

    </div>
    <div id="section">
      <div id="left" @click="a">
        <!--冰柜展示栏-->
        <div id="left_header">
          <!--展示栏顶部-->
          <div id="fridge">
            <div id="fridge_top" @click="hidden">
              <div id="f_t_1">
                <img id="sign2" src="../../assets/bingguiInfo/sign2.png">
                <span>冰柜运行状态</span>
              </div>
              <div id="f_t_2">
                <span>冰柜：{{ now_number }}/{{ total }}</span>
              </div>
              <!--<div id="f_t_3">-->
              <!--<span>区域选择</span>-->
              <!--</div>-->
              <!--添加设备-->
              <div id="addbinggui">
                <img
                  src="../../assets/bingguiHeadRight/添加设备.png"
                  alt=""
                  style="width: 3rem;height: 3rem; margin-top: 0.2rem;margin-left: 69.5rem"
                  @click="add"
                >
                <!--        <el-button type="text" @click="open">点击打开 Message Box</el-button>-->
              </div>
            </div>
            <!--冰箱栏-->
            <div id="fridges" @click="hidden">
              <div v-for="(item, index) in test" :key="index" class="grid">
                <div id="binggui" :class="{high_temp:item.high_warning,normal_temp:item.no_warning,low_temp:item.low_warning}" @click="show(index)">
                  <div id="fridge_id"><span>{{ item.name }}</span></div>
                  <img id="binggui_img1" :src="imgUrl[0]" width="25%" height="30%" :class="{hiddenImg:item.fridgeImg1}">
                  <img id="signal_green" :src="imgUrl[1]" width="5%" height="8%" :class="{hiddenImg:item.signalGreen}">
                  <img id="signal_yellow" :src="imgUrl[2]" width="5%" height="8%" :class="{hiddenImg:item.signalYellow}">
                  <img id="signal_red" :src="imgUrl[3]" width="5%" height="8%" :class="{hiddenImg:item.signalRed}">
                  <img id="V_green" :src="imgUrl[4]" width="7%" height="8%" :class="{hiddenImg:item.batteryGreen}">
                  <img id="V_yellow" :src="imgUrl[5]" width="7%" height="8%" :class="{hiddenImg:item.batteryYellow}">
                  <img id="V_red" :src="imgUrl[6]" width="7%" height="8%" :class="{hiddenImg:item.batteryRed}">
                  <img id="binggui_img2" :src="imgUrl[7]" width="25%" height="30%" :class="{hiddenImg:item.fridgeImg2}">
                  <div id="detail_1">
                    <div id="use_number_d">日开次数：{{ item.openTimes }}</div>
                    <div id="use_number_m">月开次数：{{ item.openTimes_m }}</div>
                    <div id="now_temp">当前：{{ item.temperature }}℃</div>
                    <div id="max_temp_day">24h最高：{{ item.maxTempDay }}℃</div>
                    <div id="min_temp_day">24h最低：{{ item.minTempDay }}℃</div>
                    <div id="last_use_time">最后上报：{{ item.lastOnlineTime }}</div>
                    <div id="lowBattery" :style="{'color':item.batteryColor}">{{item.battery}}V</div>
                    <div id="signal1" :style="{'color':item.signalColor}">{{item.signal}}%</div>
                  </div>
                  <div id="detail_2" ref="detail" class="active" :style="{'border':item.border,'box-shadow':item.boxshadow}">
                    <div id="name1">设备名称：{{ item.name }}
                      <!--<div id="change_1" ref="change_1">修改</div>-->
                    </div>
                    <div id="state">设备状态：{{ item.status }}</div>
                    <div id="now_temp_1">当前温度：{{ item.temperature }}℃</div>
                    <div id="signal">设备信号：{{ item.signal }}</div>
                    <div id="use_number_d1">日开次数：{{ item.openTimes }}</div>
                    <div id="use_number_m1">月开次数：{{ item.openTimes_m }}</div>
                    <div id="last_use_time1">最后上报时间：{{ item.lastOnlineTime }}</div>
                    <div id="max_temp">高温阈值：{{ item.highTemperature }}℃</div>
                    <div id="max_relieve">高温解除：{{ item.highRelieve }}℃</div>
                    <div id="min_temp">低温阈值：{{ item.lowTemperature }}℃</div>
                    <div id="min_relieve">低温解除：{{ item.lowRelieve }}℃</div>
                    <el-container>
                      <el-button id="change_2" type="primary" @click="dialogVisible = true"><span>修改</span></el-button>
                      <el-dialog title="信息修改" :visible.sync="dialogVisible" width="20rem" :modal-append-to-body="false">
                        <div id="change_1">
                          <div>冰柜名称：<input v-model="item.name"></div>
                          <div>高温阈值：<input v-model="item.highTemperature"></div>
                          <div>高温解除：<input v-model="item.highRelieve"></div>
                          <div>低温阈值：<input v-model="item.lowTemperature"></div>
                          <div>低温解除：<input v-model="item.lowRelieve"></div>
                        </div>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="dialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                      </el-dialog>
                    </el-container>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--图表栏-->
        <div id="left_bottom" @click="hidden">
          <div id="bottom_1" />
          <div id="bottom_2" />
        </div>
        <!--整体信息栏-->
        <div id="total_info" @click="hidden">

          <div class="edition">
            当前版本：{{ this.edition }}
            <el-button
              type="primary"
              class="upgrade"
              size="mini"
              plain
              @click="UpdatedialogVisible = true"
            >更新日志</el-button>
            <el-dialog
              id="updateDialog"
              title="更新日志"
              :visible.sync="UpdatedialogVisible"
              width="30%"
              top="20vh"
              :modal-append-to-body="false"
            >
              <div class="box">
                更新日志
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
      <!--事件栏-->
      <div id="right" @click="hidden">
        <!--事件表-->
        <div id="event_info">
          <div id="label">
            <h2>{{ nowType }}</h2>
          </div>
          <!--查询时间(事件表头部）-->
          <div id="queryDate">
            <div id="queryTitle">
              <!--              <img id="knock" src="../../assets/bingguiHeadRight/时间.png" alt="">-->
              <el-tooltip :content="'当前查看: ' + value" placement="top">
                <el-switch
                  id="knock"
                  v-model="value"
                  active-color="#0F2260"
                  inactive-color="#333954"
                  active-value="报警事件"
                  inactive-value="所有"
                  @change = "SwitchEvent()"
                />
              </el-tooltip>
            </div>
            <span class="timeChangeSpan">
              <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="开始日期"
                :picker-options="startPickerOptions"
                class="choiceTime"
                size="small"
              />
            </span>
            <span class="zhiCenter" style="color: white">—</span>
            <span class="timeChangeSpan">

              <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="结束日期"
                :picker-options="endPickerOptions"
                class="choiceTime"
                size="small"
              />

            </span>
          </div>

          <!--事件表信息存放部分-->
          <div id="event_container">
            <div id="event_table">
              <el-timeline><!--自定义事件表-->
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp"
                  placement="top"
                >
                  {{ activity.date }}
                  <!--事件表无限滚动-->
                  <el-card>
                    <h4>{{ activity.title }}</h4>
                    <p>{{ activity.content }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import { getAlarmList } from '@/api/bingguiEvents'
import { getToken, removeToken } from '@/utils/auth'
import { getProbeByUserId, getProbeInfo, getProbeTemperatures, getOpenTimesday, getOpenTimesmonth } from '@/api/bingguiInfo'
import { getTempBrokenLine, getOpenTimes, getAllInfo } from '@/api/bingguichart'
import ElContainer from 'element-ui/packages/container/src/main'
export default {
  name: 'Index',
  components: { ElContainer },
  data() {
    return {
      dialogVisible: false,
      p: 0,
      num: 0,
      // border: 'rgb(255, 141, 149) 0.1rem solid',
      // boxshadow: 'inset 0rem 0rem 3rem rgb(255, 65, 73)',
      // border: 'rgb(130, 179, 255) 0.1rem solid',
      // boxshadow: 'inset 0rem 0rem 3rem rgb(97, 158, 255)',
      // 图表数据
      time1: [], // 温度图表接口数据
      date1: [],
      degree1: [],
      time2: [], // 开门次数图表接口数据
      date2: [],
      degree2: [],
      // 底部数据
      openTimes: 0,
      closeTimes: 0,
      totalTimes: 0,
      openTotalDuration: 0,
      probeName:[],
      el: [],
      test: [],
      imgUrl: [
        require('../../assets/bingguiInfo/冰柜.png'),
        require('../../assets/bingguiInfo/信号绿.png'),
        require('../../assets/bingguiInfo/信号黄.png'),
        require('../../assets/bingguiInfo/信号红.png'),
        require('../../assets/bingguiInfo/电池绿.png'),
        require('../../assets/bingguiInfo/电池黄.png'),
        require('../../assets/bingguiInfo/电池红.png'),
        require('../../assets/bingguiInfo/冰柜红.png')
      ],
      total: 5,
      now_number: 5,
      battery:100,
      openTimesDay: [],
      isShow: true,
      nowTitleName: '',
      nowName: 'QD',
      nowId: '17',
      nowType: '事件表',
      nowTime: null, // 时间
      nowDate: null, // 日期和星期
      edition: '2023.3.28', // 版本号
      pickerOptionsStart: {
        disabledDate(time) {
          return (
            time.getTime() > Date.now() - 8.64e7 ||
            time.getTime() < Date.now() - 60 * 24 * 60 * 60 * 1000
          )
        }
      },
      pickerOptionsEnd: {},
      startTime: '',
      endTime: '',
      AlarmEventTable: [],  // 所有设备的报警事件
      eventTableDataOfAllProbe: [],  // 所有设备的所有数据
      AlarmEventTableOnly: [],  // 单个设备的报警事件
      eventTableDataAll: '', // 接收事件表接口数据,全部数据
      eventTableDataOnly: '', // 接收事件表接口数据,部分数据
      selectEvent: [], // 事件表展示数据的备份
      value: '100', // 区和所有信息和报警信息

      // 事件表里面的自定义图标，颜色，尺寸,各种事件基础数据

      activities: [
        {
        title: '开门示例',
        content: '冰柜开门',
        timestamp: '20xx-xx-xx xx:xx',
        // type: 'primary',
        icon: 'el-icon-folder',
        size: 'small'
      }, {
        title: '温度过高示例',
        content: '冰柜1的温度过高，当前设备温度为:24°C，超温时长为：300s\n',
        timestamp: '20xx-xx-xx xx:xx',
        icon: 'icon-third-wenduguogao'
      }, {
        title: '温度过低示例',
        content: '冰柜1的温度过低，当前设备温度为:24°C，超温时长为：300s\n',
        timestamp: '20xx-xx-xx xx:xx',
        icon: 'icon-third-wenduguodi'
      }, {
        title: '警告！！！示例',
        content: '冰柜1异常，请尽快处理\n',
        timestamp: '20xx-xx-xx xx:xx',
        icon: 'icon-third-jinggao'
        // size: 'large'
      }, {
        title: '温度变化过快示例',
        content: '冰柜1的温度变化过快，当前设备温度为:24°C，超温时长为：300s\n',
        timestamp: '20xx-xx-xx xx:xx',
        icon: 'icon-third-bianhualiang'
      }, {
        title: '湿度过高示例',
        content: '冰柜1的湿度过高，当前设备湿度为:24',
        icon: 'icon-third-shiduguogao',
        timestamp: '20xx-xx-xx xx:xx'
      }, {
        title: '湿度过低示例',
        content: '冰柜1的湿度过低，当前设备湿度为:24',
        icon: 'icon-third-shiduguodi',
        timestamp: '20xx-xx-xx xx:xx'
      }, {
        title: '开机示例',
        content: '冰柜1已开机s\n',
        timestamp: '20xx-xx-xx xx:xx',
        icon: 'icon-third-kaiji'
      }, {
        title: '设备低压示例',
        content: '冰柜1的当前电压为20V',
        icon: 'icon-third-diyagongdian',
        timestamp: '20xx-xx-xx xx:xx'
      }

      ]

    }
  },
  computed: {
    startPickerOptions() {
      const that = this
      return {
        disabledDate(time) {
          if (that.endTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() > new Date(that.endTime).getTime()// 开始日期在结束日期之前
            )
          }
          return time.getTime() > Date.now() // 实现1效果
        }
      }
    }, // 日期选择器开始时间
    endPickerOptions() {
      const that = this
      return {
        disabledDate(time) {
          if (that.startTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(that.startTime).getTime() - 8.64e7
            )
          }
          return time.getTime() > Date.now() // 实现1效果
        }
      }
    }// 日期选择器结束时间
  },
  watch: {
    startTime() { // 日期选择器开始时间
      this.selectDate()
    },
    endTime() { // 日期选择器结束时间
      this.selectDate()
    }
  },
  // 生命周期
  mounted() {
    // 冰柜信息接口1
    getProbeByUserId(1).then(res => {
      // console.log( res.data)
      // res.data.probes[0].name = '测试设备1'
      this.test = [res.data.probes[14], res.data.probes[15], res.data.probes[16], res.data.probes[17], res.data.probes[18]]
      for (let i = 0; i < this.test.length; i++) {
        console.log(this.test[i].id)
        this.test[i].lastOnlineTime = this.test[i].lastOnlineTime.slice(5)
        this.test[i].highTemperature = parseFloat(this.test[i].highTemperature).toFixed(1)
        this.test[i].lowTemperature = parseFloat(this.test[i].lowTemperature).toFixed(1)
        this.test[i].highRelieve = parseFloat(this.test[i].highRelieve).toFixed(1)
        this.test[i].lowRelieve = parseFloat(this.test[i].lowRelieve).toFixed(1)
      }
      console.log(res.data.area.name)// 区域id
      this.nowTitleName = res.data.area.name // 区域标题
      for (let i = 0; i < this.test.length; i++) {
        this.test[i].no_warning = true
        this.test[i].batteryGreen = false;
        this.test[i].batteryYellow = true;
        this.test[i].batteryRed = true;
        this.test[i].fridgeImg1 = false;
        this.test[i].fridgeImg2 = true;
        this.test[i].signalGreen = false;
        this.test[i].signalYellow = true;
        this.test[i].signalRed = true;
        getAlarmList(this.test[i].id).then(res => {
          this.eventTableDataAll = res.data
          // console.log("length: ", this.eventTableDataAll.length);
          for (let i = 0; i < this.eventTableDataAll.length; i++) {
            // 通过循环将所有设备的所有事件都放到eventTableDataOfAllProbe里面
            this.eventTableDataOfAllProbe.push(this.eventTableDataAll[i]);
          }
          // console.log("eventTableDataOfAllProbe: ", this.eventTableDataOfAllProbe);
          // this.showEventTable(this.eventTableDataAll)
          this.SwitchEvent();
          this.nowType = '所有冰柜事件表'
        })
      }
      // setTimeout(function(){
      //
      // },15000)  //十分钟
      for (let i = 0; i < this.test.length; i++) {
        getAlarmList(this.test[i].id).then(res=>{
          this.test[i].signal = res.data[res.data.length-1].signal
          this.test[i].signal = parseFloat(this.test[i].signal).toFixed(0)
          if(this.test[i].signal > 70){
            this.test[i].signalColor = 'rgb(26,250,41)'
            this.test[i].signalGreen = false;
            this.test[i].signalYellow = true;
            this.test[i].signalRed = true;
          }
          else if(this.test[i].signal < 70 && this.test[i].signal >= 40){
            this.test[i].signalColor = 'rgb(244,234,42)'
            this.test[i].signalGreen = true;
            this.test[i].signalYellow = false;
            this.test[i].signalRed = true;
          }
          else if(this.test[i].signal < 40){
            this.test[i].signalColor = 'rgb(216,30,6)'
            this.test[i].signalGreen = true;
            this.test[i].signalYellow = true;
            this.test[i].signalRed = false;
          }
          this.test[i].battery = res.data[res.data.length-1].battery
          this.test[i].battery = parseFloat(this.test[i].battery)/1000
          this.test[i].battery = parseFloat(this.test[i].battery).toFixed(2)
          if(this.test[i].battery > 2.70){
            this.test[i].batteryColor = 'rgb(26,250,41)'
            this.test[i].batteryGreen = false;
            this.test[i].batteryYellow = true;
            this.test[i].batteryRed = true;
          }
          else if(this.test[i].battery < 2.70 && this.test[i].battery >= 2.50){
            this.test[i].batteryColor = 'rgb(244,234,42)'
            this.test[i].batteryGreen = true;
            this.test[i].batteryYellow = false;
            this.test[i].batteryRed = true;
          }
          else if(this.test[i].battery < 2.50){
            this.test[i].batteryColor = 'rgb(216,30,6)'
            this.test[i].batteryGreen = true;
            this.test[i].batteryYellow = true;
            this.test[i].batteryRed = false;
          }
        })
        getProbeTemperatures(this.test[i].id).then(res => {
          this.test[i].maxTempDay = Object.values(Object.values(res.data)[0])[0]
          this.test[i].minTempDay = Object.values(Object.values(res.data)[0])[0]
          for(let j = 0 ; j < Object.values(res.data)[0].length ; j++){
            if(Object.values(Object.values(res.data)[0])[j] > this.test[i].maxTempDay){
              this.test[i].maxTempDay = Object.values(Object.values(res.data)[0])[j]
            }
            if(Object.values(Object.values(res.data)[0])[j] < this.test[i].minTempDay){
              this.test[i].minTempDay = Object.values(Object.values(res.data)[0])[j]
            }
          }
          this.test[i].maxTempDay = parseFloat(this.test[i].maxTempDay).toFixed(1)
          this.test[i].minTempDay = parseFloat(this.test[i].minTempDay).toFixed(1)
          //this.test[i].temperature = Object.values(Object.values(res.data)[0])[Object.values(res.data)[0].length - 1]

        })
        getProbeInfo(this.test[i].id).then(res => {
          this.test[i].temperature = res.data.temp
          this.test[i].temperature = parseFloat(this.test[i].temperature).toFixed(1)
          if (this.test[i].temperature > this.test[i].highTemperature) {
            this.test[i].no_warning = false
            this.test[i].high_warning = true
            this.test[i].low_warning = false
            this.test[i].border = 'rgb(255, 141, 149) 0.1rem solid'
            this.test[i].boxshadow = 'inset 0rem 0rem 3rem rgb(255, 65, 73)'
          } else if (this.test[i].temperature < this.test[i].lowTemperature) {
            this.test[i].no_warning = false
            this.test[i].high_warning = false
            this.test[i].low_warning = true
            this.test[i].border = 'rgb(130, 179, 255) 0.1rem solid'
            this.test[i].boxshadow = 'inset 0rem 0rem 3rem rgb(97, 158, 255)'
          }
        })
        getOpenTimesday(this.test[i].id).then(res => {
          this.test[i].openTimes = Object.values(res.data)[Object.values(res.data).length-1].temp;
        })
        getOpenTimesmonth(this.test[i].id).then(res => {
          this.test[i].openTimes_m = Object.values(res.data)[Object.values(res.data).length-1].temp;
        })
      }

      // console.log(res.data.probes[0].name)
      // 根据冰柜信号显示不同的信号图片
      // if (signal >= 90){
      //   this.imgUrl[1] = require('../../assets/bingguiInfo/信号绿.png');
      //   this.imgUrl[2] = null;
      //   this.imgUrl[3] = null;
      // }
      // else if(signal >=50 && signal < 90){
      //   this.imgUrl[1] = null;
      //   this.imgUrl[2] = require('../../assets/bingguiInfo/信号黄.png');
      //   this.imgUrl[3] = null;
      // }
      // else if(signal < 50){
      //   this.imgUrl[1] = null;
      //   this.imgUrl[2] = null;
      //   this.imgUrl[3] = require('../../assets/bingguiInfo/信号红.png');
      // }

      this.show(0)
    })
    // 冰柜信息接口2

    // 冰柜温度接口

    // 冰柜温度图表1
    // getTempBrokenLine(this.nowId).then(res => {
    //   console.log('123', res)
    //   this.time1 = res.data
    //   for (var i in this.time1) {
    //     this.date1.push(this.time1[i].时间)
    //     this.degree1.push(this.time1[i].温度)
    //   }
    //   console.log('5', this.date1)
    //   console.log('5', this.degree1)
    // })
    // 冰柜开门图表1
    getOpenTimes(1).then(res => {
      console.log('2', res)
    })
    // 总体信息
    getAllInfo(17).then(res => {
      this.openTimes = res.data.openTimes
      this.closeTimes = res.data.closeTimes
      this.totalTimes = res.data.totalTimes
      this.openTotalDuration = res.data.openTotalDuration
    })
    console.log(getToken())// 打印接口的token
    this.$nextTick(() => { // 时间
      setInterval(this.showTime, 1000)
    })
    this.format()// 格式化事件表
  },
  methods: {
    SwitchEvent() {
      if(this.value == "报警事件") {
        for (let i = 0; i < this.eventTableDataOfAllProbe.length; i++) {
          if (this.eventTableDataOfAllProbe[i].event != 'Separate') {
            this.AlarmEventTable.push(this.eventTableDataOfAllProbe[i]);
          }
        }
        // console.log('this.AlarmEventTable: ', this.AlarmEventTable);
        // console.log('alarm');
        if (this.nowType == "所有冰柜事件表") {
          this.showEventTable(this.AlarmEventTable);
        }
        else {
          for(let i = 0; i < this.eventTableDataOnly.length; i++) {
            if (this.eventTableDataOnly[i].event != 'Separate') {
              this.AlarmEventTableOnly.push(this.eventTableDataOnly[i]);
            }
          }
          this.showEventTable(this.AlarmEventTableOnly);
        }
      }
      else {
        // console.log('all');
        if (this.nowType == "所有冰柜事件表") {
          this.showEventTable(this.eventTableDataOfAllProbe);
        }
        else {
          // console.log("this.eventTableDataOnly: ", this.eventTableDataOnly);
          this.showEventTable(this.eventTableDataOnly);
        }
      }
      // console.log('switch: ', this.value);
    },
    dealData() {
      console.log('调用了deal')
      getTempBrokenLine(this.nowId).then(res => {
        // console.log('123', res)
        this.time1 = res.data
        this.date1 = []
        this.degree1 = []
        for (var i in this.time1) {
          this.date1.push(this.time1[i].time)
          this.degree1.push(this.time1[i].Temp)
        }
        // console.log('表1日期', this.date1)
        // console.log('表1温度', this.degree1)
        // 在deal里面就生成图表
        this.createChart1(this.num)
      })
      getOpenTimes(this.nowId).then(res => {
        this.time2 = res.data
        this.date2 = []
        this.degree2 = []
        for (var i in this.time2) {
          this.date2.push(this.time2[i].time)
          this.degree2.push(this.time2[i].temp)
        }
        this.createChart2(this.num)
      })
      getAllInfo(this.nowId).then(res => {
        this.openTimes = res.data.openTimes
        this.closeTimes = res.data.closeTimes
        this.totalTimes = res.data.totalTimes
        this.openTotalDuration = res.data.openTotalDuration
      })
    },
    // 生成温度图表
    createChart1(num) {
      console.log('调用了chart1')
      console.log('test:', this.test)
      var echarts = this.$echarts
      var myChart1 = echarts.init(document.querySelector('#bottom_1'))
      var dateList = this.date1
      var valueList = this.degree1
      var name = this.test[num].name + '温度'
      var option = {
        title: {
          text: name,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['degree']
        },
        grid: {
          left: '0%',
          top: '20%',
          right: '5%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [
          {
            data: dateList,
            axisLabel: {
              color: 'rgba(255,255,255,.5)'
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: 'rgba(255,255,255,.8)'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            min: -15,
            max: 45,
            interval: 10
          }
        ],
        series: [
          {
            type: 'line',
            name: '时刻温度(℃)',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(252,192,30,.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 47, 167,.1)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: valueList,
            smooth: true,
            symbolSize: 3,
            lineStyle: {
              width: 0
            },
            itemStyle: {
              normal: {
                color: 'rgb(255, 191, 0)',
                lineStyle: {
                  color: 'rgb(255,222,179)'
                },
                label: {
                  show: true,
                  color: 'rgb(244, 196, 48)',
                  position: 'top',
                  fontSize: 9
                }
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              label: {
                position: 'end'
              },
              lineStyle: {
                color: '#FA3934'
              },
              data: [
                {
                  name: '高温阈值',
                  yAxis: this.test[num].highTemperature,
                  lineStyle:
                  {
                    color: 'rgba(250,57,52,.8)'
                  }
                },
                {
                  name: '低温阈值',
                  yAxis: this.test[num].lowTemperature,
                  lineStyle:
                  {
                    color: 'rgba(0, 221, 255,.8)'
                  }
                }
              ]
            }
          }
        ]
      }
      myChart1.setOption(option)
      window.addEventListener('resize', () => {
        myChart1.resize()
      })
    },
    // 生成开门次数图表
    createChart2(num) {
      console.log('调用了chart2')
      var echarts = this.$echarts
      var dateList = this.date2
      var valueList = this.degree2
      var name = this.test[num].name + '开启次数'
      var myChart2 = echarts.init(document.querySelector('#bottom_2'))
      var option = {
        title: {
          text: name,
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#2f89cf'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 修改图表的大小
        grid: {
          left: '0%',
          top: '20%',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: [
          {
            data: dateList,
            axisTick: {
              show: false
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: 'rgba(255,255,255,.6) ',
              fontSize: '12'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // 修改刻度标签 相关样式
            axisLabel: {
              color: 'rgba(255,255,255,.6) ',
              fontSize: 12
            },
            axisTick: {
              show: false
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            },
            min: 0,
            max: 120
          }
        ],
        series: [
          {
            name: '开启次数',
            type: 'bar',
            barWidth: '35%',
            data: valueList,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ]),
            itemStyle: {
              barBorderRadius: 5,
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 9,
                  color: '#fff'
                }
              }
            }
          }
        ]
      }
      myChart2.setOption(option)
      window.addEventListener('resize', () => {
        myChart2.resize()
      })
    },
    a() { // 打印数组test的id
      // console.log(this.test[1].id);
    },
    show(index) {
      console.log('跑了show', index)
      //展示该设备信息
      this.nowType = this.test[index].name + '事件表'
      for (let i = 0; i < this.el.length; i++) {
        this.el[i].setAttribute('class', 'active')
      }
      this.nowId = this.test[index].id
      console.log('nowId: ', this.nowId)// 打印nowId,
      this.dealData()
      this.el.push(this.$refs.detail[index])
      // console.log("this.el: ", this.el);
      if (this.p !== 1) {
        this.p++
      }
      if (this.el[this.el.length - 1].getAttribute('class') === 'active') {
        this.el[this.el.length - 1].setAttribute('class', ' ')
        if ((index + 1) % 4 === 0) {
          this.el[this.el.length - 1].setAttribute('class', 'left')
        }
      } else {
        this.el[this.el.length - 1].setAttribute('class', 'active')
      }
      if (this.el.length === 2) {
        this.el = []
        this.el.push(this.$refs.detail[index])
      }
      this.num = index
      this.createChart1(index)
      this.createChart2(index)
      // 事件表接口
      getAlarmList(this.nowId).then(res => {
        console.log('getAlarmList', res)
        // console.log(res.data[0].probeId)
        this.eventTableDataOnly = res.data
        this.format()
        this.showEventTable(this.eventTableDataOnly)
      })
    },
    hidden() {
      console.log('hidden')
      if (this.p !== 1) {
        for (let i = 0; i < this.el.length; i++) {
          this.el[i].setAttribute('class', 'active')
        }
      } else {
        this.p--
      }
    },
    // 头部展示时间
    showTime() {
      const date = new Date()
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      // console.log('====', month);
      month = month < 10 ? `0${month}` : month
      let day = date.getDate()
      day = day < 10 ? `0${day}` : day
      let hour = date.getHours()
      hour = hour < 10 ? `0${hour}` : hour // 用三目运算符调整数字显示格式
      let minute = date.getMinutes()
      minute = minute < 10 ? `0${minute}` : minute
      let second = date.getSeconds()
      second = second < 10 ? `0${second}` : second
      const week = date.getDay()
      const weekArr = [
        '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
      ]

      // 加载现在时间
      // const current = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      this.nowTime = this.nowTime = `${hour}:${minute}:${second}`// 时间
      this.nowDate = this.nowDate = `${year}-${month}-${day}  ${weekArr[week]}`// 日期和星期
    },
    // vue跳转到登陆页面
    getout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeToken()
        this.$router.push(name = 'login')// 页面跳转
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
    add() {
      this.$prompt('请输入设备序列号', '添加设备', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, // 这是邮箱的
        inputErrorMessage: '设备序列号格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的设备序列号是: ' + value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 事件表格式化
    format() {
      this.activities = []
    },
    // 事件表日期选择功能
    selectDate() {
      const selectActivities = [] // 创建新数组接收数据
      const start = this.startTime.getTime() // 接收开始时间
      const end = this.endTime.getTime() // 接收结束时间

      // const selectActivity = this.selectEvent
      // for (
      //   let activityNo = 0;
      //   activityNo < selectActivity.length;
      //   activityNo++
      // ) {
      //   const stamp = new Date(selectActivity[activityNo].timestamp).getTime()
      //   // console.log(activityNo, stamp)//打印数组下标和时间戳
      //   if (start === end) {
      //     if (stamp >= start) {
      //       selectActivities.push(selectActivity[activityNo])
      //     }
      //   } else {
      //     if (stamp >= start && stamp <= end) {
      //       selectActivities.push(selectActivity[activityNo])
      //     }
      //   }
      // }
      // this.activities = selectActivities
      if (this.value == '0') {
        const selectActivity = this.selectEvent// 全部数组，
        for (
          let activityNo = 0;
          activityNo < selectActivity.length;
          activityNo++
        ) {
          const stamp = new Date(selectActivity[activityNo].timestamp).getTime()
          // console.log(activityNo, stamp)//打印数组下标和时间戳
          if (start === end) {
            if (stamp >= start) {
              selectActivities.push(selectActivity[activityNo])
            }
          } else {
            if (stamp >= start && stamp <= end) {
              selectActivities.push(selectActivity[activityNo])
            }
          }
        }
        this.activities = selectActivities
      } else {
        const selectActivity = this.activities// 一个冰柜的数据
        for (
          let activityNo = 0;
          activityNo < selectActivity.length;
          activityNo++
        ) {
          const stamp = new Date(selectActivity[activityNo].timestamp).getTime()
          // console.log(activityNo, stamp)//打印数组下标和时间戳
          if (start === end) {
            if (stamp >= start) {
              selectActivities.push(selectActivity[activityNo])
            }
          } else {
            if (stamp >= start && stamp <= end) {
              selectActivities.push(selectActivity[activityNo])
            }
          }
        }
        this.activities = selectActivities
        // const selectActivity = this.selectEvent // 接收数据（进行处理）这是所有的数据
        // console.log(selectActivities)//打印符合条件的数组元素
        // console.log(selectActivity)

        // this.activities = selectActivities
      }
    },

    // 事件表的输出
    showEventTable(eventTableData) {
      for(let i = 0; i < this.test.length; i++) {
        // console.log(this.test[i].id)
        // console.log(this.probeName)
        this.probeName[this.test[i].id] = this.test[i].name;  // 设备名称传入probeName数组
        // console.log('probeName', this.probeName);
      }
      this.format()
      console.log("调用了showeventtable");
      let eventData = eventTableData;
      // console.log("this.eventData: ", eventData);
      // console.log('eventdata: ', eventData);
      for (let eventNo = 0; eventNo < eventData.length; eventNo++) {
        let activityData = {
          timestamp: '',
          icon: '',
          title: '',
          content: ''
        }
        activityData.timestamp = eventData[eventNo].date
        if (eventData[eventNo].event == 'Separate') {
          activityData.icon = 'icon-third-shuangkaimen'// 电脑图标
          activityData.title = '开门'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '开门，' + '当前温度为：' +
            eventData[eventNo].temperature + '°C '
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'LowPower') {
          activityData.icon = 'icon-third-diyagongdian'
          activityData.title = '设备低压'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的当前电压为：' +
            eventData[eventNo].battery + 'V'
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'TempAlarm') {
          activityData.icon = 'icon-third-wenduguogao'
          activityData.title = '温度过高'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的温度过高，当前温度为：' +
            eventData[eventNo].temperature + '°C ' +
            '超温时长为: ' +
            eventData[eventNo].overTemperature
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'LowTemp') {
          activityData.icon = 'icon-third-wenduguodi'
          activityData.title = '温度过低'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的温度过低，当前温度为：' +
            eventData[eventNo].temperature + '°C ' +
            '低温时长为: ' +// 这里原先是超温时长，不知道能不能显示低温时长
            eventData[eventNo].overTemperature
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'HighHumidity') {
          activityData.icon = 'icon-third-shiduguogao'
          activityData.title = '湿度过高'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的湿度过高，当前湿度为：'
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
          // '的设备当前湿度为：' +
        } else if (eventData[eventNo].event == 'LowHumidity') {
          activityData.icon = 'icon-third-shiduguodi'
          activityData.title = '湿度过低'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的湿度过低，当前湿度为：'
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
          // '的设备当前湿度为：' +
        } else if (eventData[eventNo].event == 'Fluctuation') {
          activityData.icon = 'icon-third-bianhualiang'
          activityData.title = '温度变化过快'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '的温度变化过快，当前温度为：' +
            eventData[eventNo].temperature + '°C ' +
            '超温时长为: ' +
            eventData[eventNo].overTemperature
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'LogOn') {
          activityData.icon = 'icon-third-kaiji'
          activityData.title = '开机'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '已开机'
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else if (eventData[eventNo].event == 'Alarm') {
          activityData.icon = 'icon-third-jinggao'
          activityData.title = '警告！！！'
          activityData.content =
            this.probeName[eventData[eventNo].probeId] +
            '异常，请尽快处理'
          this.activities.push(activityData)
          this.selectEvent.push(activityData)
        } else {
          // 所有都不是
          // activityData.icon = 'el-icon-refresh'
          // activityData.title = '温度变化'
          // activityData.content =
          //   '冰柜' +
          //   eventData[eventNo].probeId +
          //   '温度变化，当前温度为' +
          //   eventData[eventNo].temperature +
          //   '°C '
        }

        // activityData.content =
        //     '设备id：' +
        //     eventData[eventNo].probeId +
        //     '，事件id：' +
        //     eventData[eventNo].id +
        //     '， 电压：' +
        //     eventData[eventNo].battery +
        //     'V， 超温时长：' +
        //     eventData[eventNo].overTemperature +
        //     's，温度：' +
        //     eventData[eventNo].temperature +
        //     '°C，信号：' +
        //     eventData[eventNo].signal +
        //     '%'

        // console.log(this.activities)
        // console.log(this.selectEvent)//接口接过的数据
      }
    }
  }

}
</script>

<style scoped>
#index {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #081138;
}

#index #section {
  display: flex;
  flex-direction: row;
  width: 100rem;
  height: 90%;
}

#index #section #left #left_header {
  background: #081138;
  width: 75rem;
  height: 68%;
  ;
}

.active {
  display: none;
}

.hiddenImg{
  visibility: hidden;
}

.left {
  position: relative;
  right: 34.95rem;
}

.normal_temp{
  background: #081138;
  border: rgb(32, 61, 154) 0.1rem solid;
  box-shadow: inset 0rem 0rem 0.5rem rgb(55, 72, 154);
}
.high_temp{
  background: #081138;
  border: rgb(255, 141, 149) 0.1rem solid;
  box-shadow: inset 0rem 0rem 3rem rgb(255, 65, 73);
}
.low_temp{
  background: #081138;
  border: rgb(130, 179, 255) 0.1rem solid;
  box-shadow: inset 0rem 0rem 3rem rgb(97, 158, 255);
}

#index #section #left #left_header #fridge {
  background: #081138;
  width: 74rem;
  height: 97%;
  margin: auto;
  border: rgb(55, 56, 154) 0.1rem solid;
  box-shadow: inset 0rem 0rem 0.5rem rgb(53, 98, 154);
  position: relative;
  top: 0.5rem;
}

#index #section #left #left_header #fridge_top {
  width: 73rem;
  height: 10%;
  display: flex;
  align-content: center;
  position: relative;
}

#index #section #left #left_header #fridge_top #f_t_1 {
  height: 50%;
  width: 20rem;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-content: center;
  margin-left: 2rem;
}

#index #section #left #left_header #fridge_top #f_t_1 span {
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1rem;
}

#index #section #left #left_header #fridge_top #f_t_2 {
  height: 50%;
  width: 20rem;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 12rem;
  display: flex;
}

#index #section #left #left_header #fridge_top #f_t_2 span {
  color: white;
  font-size: 0.7rem;
  margin-top: 0.5rem;
}

#index #section #left #left_header #fridge_top #f_t_3 {
  height: 50%;
  width: 6rem;
  margin-bottom: auto;
  margin-top: auto;
  margin-left: 60rem;
  background: rgb(43, 159, 237);
  border-radius: 0.3rem;
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
}

#index #section #left #left_header #fridge_top #f_t_3 span {
  color: white;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

#index #section #left #left_header #fridges {
  background: #081138;
  display: flex;
  width: 72rem;
  height: 90%;
  position: relative;
  left: 1.4rem;
  bottom: 0.2rem;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}

#index #section #left #left_header #fridges::-webkit-scrollbar {
  width: 0.000001rem;

}

#index #section #left #left_header .grid {
  width: 25%;
  height: 50%;
  display: flex;
}

#index #section #left #left_header #binggui #detail_1 {
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: 11.25rem;
  right: 1rem;
  width: 14rem;
  height: 20rem;
  left: 1.5rem;
}

#index #section #left #left_header #binggui {
  width: 95%;
  height: 95%;
  display: flex;
  flex-direction: column;
}

#index #section #left #left_header #binggui #fridge_id {
  color: white;
  width: 85%;
  height: 25%;
  border-radius: 1rem;
  background-image: linear-gradient(to right, #2c63ff, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
  padding-left: 1rem;
  margin-left: 1.2rem;
  margin-top: 1.2rem;
  font-size: 1rem;
  display: flex;
  align-content: center;
}

#index #section #left #left_header #binggui #fridge_id span {}

#index #section #left #left_header #binggui #binggui_img1 {
  position: relative;
  left: 10.3rem;
  bottom: 1.2rem;
}
#index #section #left #left_header #binggui #binggui_img2 {
  position: relative;
  left: 10.3rem;
  bottom: 10.83rem;
}
#index #section #left #left_header #binggui #signal_green {
  position: relative;
  left: 1.4rem;
  bottom: 2.65rem;
  z-index: 3;
}

#index #section #left #left_header #binggui #signal_yellow {
  position: relative;
  left: 1.4rem;
  bottom: 3.32rem;
  z-index: 2;
}

#index #section #left #left_header #binggui #signal_red {
  position: relative;
  left: 1.4rem;
  bottom: 4.02rem;
  z-index: 1;
}

#index #section #left #left_header #binggui #V_green {
  position: relative;
  left: 4.7rem;
  bottom: 4.91rem;
  z-index: 3;
}

#index #section #left #left_header #binggui #V_yellow {
  position: relative;
  left: 4.7rem;
  bottom: 6rem;
  z-index: 2;
}

#index #section #left #left_header #binggui #V_red {
  position: relative;
  left: 4.7rem;
  bottom: 7.15rem;
  z-index: 1;
}
#index #section #left #left_header #binggui #lowBattery {
  position: relative;
  height: 1rem;
  width: 4rem;
  left: 4.45rem;
  bottom: 8.25rem;
  font-size: 0.8rem;
  color:rgb(26,250,41);
}
#index #section #left #left_header #binggui #signal1 {
  position: relative;
  height: 1rem;
  width: 4rem;
  left: 1rem;
  bottom: 9.25rem;
  font-size: 0.8rem;
  color:rgb(26,250,41);
}

#index #section #left #left_header #binggui #now_temp {
  position: relative;
  left: -0.5rem;
  font-size: 1.3rem;
  color: white;
  top: -1.5rem
}

#index #section #left #left_header #binggui #max_temp_day {
  position: relative;
  color: white;
  left: -0.5rem;
  font-size: 1rem;
  top: 1rem;
}

#index #section #left #left_header #binggui #min_temp_day {
  position: relative;
  left: 7.5rem;
  font-size: 1rem;
  color: white;
  top: -0.16rem
}

#index #section #left #left_header #binggui #last_use_time {
  position: relative;
  left: -0.5rem;
  font-size: 1rem;
  color: white;
  top: 0.7rem
}

#index #section #left #left_header #binggui #use_number_d {
  color: white;
  position: relative;
  left: -0.5rem;
  font-size: 1rem;
  top: 2.9rem;
}

#index #section #left #left_header #binggui #use_number_m {
  color: white;
  position: relative;
  left: 7.5rem;
  font-size: 1rem;
  top: 1.72rem;
}

#index #section #left #left_header #binggui #work_time {
  color: white;
}

#index #section #left #left_header #binggui #h_temp {
  color: white;
}

#index #section #left #left_header #binggui #l_temp {
  color: white;
}

#index #section #left #left_header #binggui #place {
  color: white;
}

#index #section #left #left_header #binggui #detail_2 {
  width: 18rem;
  height: 20rem;
  background: #081138;
  z-index: 100;
  border: rgb(32, 61, 154) 0.1rem solid;
  box-shadow: inset 0rem 0rem 0.5rem rgb(55, 72, 154);
  color: white;
  margin-left: 17rem;
  position: relative;
  bottom: 25.52rem;
}

#index #section #left #left_header #binggui #detail_2 #name1 {
  display: flex;
  margin-top: 1rem;
  margin-left: 1rem;
  align-content: center;
}

#index #section #left #left_header #binggui #detail_2 #change_1 {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}

#index #section #left #left_header #binggui #detail_2 #change_1 div {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}

#index #section #left #left_header #binggui #detail_2 #state {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #now_temp_1 {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #open_time {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #signal {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #use_number_d1 {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #use_number_m1 {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #last_use_time1 {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #max_temp {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #max_relieve {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #min_temp {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #min_relieve {
  margin-left: 1rem;
  width: 15rem;
  display: flex;
  margin-bottom: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #change_2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 8rem;
  height: 1.5rem;
  background: rgb(43, 159, 237);
  border-radius: 0.3rem;
  box-shadow: inset 0rem 0rem 0.5rem rgb(55, 72, 154);
  position: relative;
  bottom: 0.5rem;
  left: 5rem;
}

#index #section #left #left_header #binggui #detail_2 #change_2 span {
  color: white;
  position: relative;
  font-size: 0.8rem;
  bottom: 0.2rem;
}

#index #section #left #left_header #binggui #detail_2 #change_time {
  margin-left: 1rem;
}

#index #section #left #left_header #binggui #detail_2 #stop {
  margin-top: 0.4rem;
  color: white;
  font-size: 0.8rem;
  width: 12rem;
  height: 1.1rem;
  background: rgb(43, 159, 237);
  border-radius: 0.3rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#index #section #left #left_header #binggui #detail_2 #delete {
  margin-top: 0.4rem;
  color: white;
  font-size: 0.8rem;
  width: 12rem;
  height: 1.1rem;
  background: rgb(43, 159, 237);
  border-radius: 0.3rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.8rem;
}

#index #section #left #left_bottom {
  position: relative;
  margin-bottom: 0.4rem;
  display: flex;
  flex-direction: row;
  width: 75rem;
  height: 28%;
}

#index #section #left #left_bottom #bottom_1 {
  position: absolute;
  padding: 0 0.4rem 0.5rem;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
  left: 10px;
  width: 37rem;
  height: 100%;
}

#index #section #left #left_bottom #bottom_2 {
  position: absolute;
  padding: 0 0.4rem 0.5rem;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
  right: 10px;
  width: 36rem;
  height: 100%;
}

#index #section #left #total_info {
  position: absolute;
  bottom: 1rem;
  margin-left: -1rem;
  width: 75rem;
  height: 3%;
}

#index #section #left #total_info ul li {
  float: left;
  list-style: none;
  padding-right: 3rem;
  color: rgba(255, 255, 255, .5);
}

#index #section #left #total_info .edition {
  position: absolute;
  right: -25rem;
  color: rgba(255, 255, 255, .5);
}

#index #section #left #total_info .edition .upgrade {
  margin-left: 0.5rem;
}

#index #header {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-image: url('../../assets/bingguiHeadRight/光@2x.png');
  background-size: 100% 120%;
  background-repeat: no-repeat;
  /*background: #fffefe;*/
  width: 100rem;
  height: 10%;
  background-color: #081138;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
}

#index #header #nowTime {
  color: white;
  width: 12rem;
  height: 5rem;
  line-height: 7rem;
  font-size: 30px;
  vertical-align: middle;
  text-align: right;
}

#index #header #nowDate {
  color: white;
  width: 15rem;
  height: 5rem;
  line-height: 7.5rem;
  font-size: 16px;
  margin-left: 2rem;
}

#index #header #title {
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 10px;
  color: white;
  line-height: 3.8rem;
  width: 42.5rem;
  height: 100%;
}

#index #header #loader {
  width: 10rem;
  height: 5rem;
  line-height: 7.5rem;
  text-align: center;
  margin-left: 15rem;
}

#index #header #loader #name {
  width: 2rem;
  height: 3.5rem;
  color: white;
  font-size: 2rem;
  margin-right: 1.5rem;
  position: relative;
  bottom: 1.1rem;
}

#index #section #right {
  display: flex;
  flex-direction: column;
  background: #081138;
  width: 25rem;
  height: 95%;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
}

#index #section #right #event_info {
  width: 22.5rem;
  height: 38.5rem;
  /*background: #081138;*/
  /*box-shadow: 1px 1px 20px 5px  RGB(41,61,107) inset;*/

}

#index #section #right #event_info #label {
  width: 100%;
  height: 2.5rem;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
  margin-left: 1.1rem;
  margin-top: 1rem;
  border-radius: 0.208rem;
  background: #081138;
}

#index #section #right #event_info #label h2 {
  font-size: 1.25rem;
  text-align: center;
  line-height: 0.1rem;
  color: #fff;
}

#index #section #right #event_info #queryDate {
  margin-top: 0.417rem;
  margin-left: 1rem;
  height: 1.875rem;
  width: 100%;
}

#index #section #right #event_info #queryDate #knock {
  /*按钮*/
  /*width: 2rem;*/
  /*height: 2rem;*/
  margin-right: 1.5rem;
}

#index #section #right #event_info #queryDate #queryTitle {
  float: left;
  margin-left: 0.5rem;
  color: #fff;
  font-size: 1.042rem;
  line-height: 1.875rem;
}

/*时间选择器css*/
::v-deep .el-input {
  width: 8rem;
}

/*选择框*/
::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: #174181;
  box-shadow: 1px 1px 5px 1px RGB(41, 61, 107) inset;
  height: 2rem;
  width: 7.813rem;
  padding-right: 0;
  color: #ffffff;
  /*字体为白色*/
}

::v-deep .el-switch {
  margin-right: 1rem;
}

::v-deep .elDatePicker.el-picker-panel {
  color: #000000;
  background: #002450;
  border: 1px solid #174181;
}

#index #section #right #event_info #event_container {
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
  margin-top: 0.417rem;
  margin-left: 0.85rem;
  width: 100%;
  height: 104%;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*滚动条css*/
#index #section #right #event_info #event_container::-webkit-scrollbar {
  width: 2px;
}

#index #section #right #event_info #event_container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgb(255, 255, 255);
}

#index #section #right #event_info #event_container::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(230, 233, 236, 0.1);
}

#index #section #right #event_info #event_table {
  margin-top: 0.417vw;
  margin-left: 0.833vw;
  height: 42.2rem;
}

/*时间轴整体css*/
::v-deep .el-timeline {
  font-size: 0.833rem;
  list-style: none;
  padding-left: 0;
}

/*每段时间轴所携带信息css*/
::v-deep .el-timeline-item__wrapper {
  padding-left: 18px;
  padding-right: 10px;
  color: black;
}

/*时间轴卡片上面的字体（时间例如2018-x-x）*/
::v-deep .el-timeline-item__timestamp.is-top {
  padding-top: 0.208rem;
  margin-left: 0.5rem;
}

/*时间轴每个卡片上面时间的css*/
::v-deep .el-timeline-item__timestamp {
  color: #909399;
  line-height: 1;
  font-size: 0.833rem;
}

/*时间图标里字体的css*/
::v-deep .el-timeline-item__icon {
  color: #ffffff;
  font-size: 1.458rem;
}

/*时间轴每个图标的css*/
::v-deep .el-timeline-item__node {
  background: #081138;
  opacity: 1.0;
  border: white;
  width: 2rem;
  height: 2rem;
  margin: -0.6rem;
}

/*卡片css,比下面的小*/
::v-deep .el-card__body {
  padding: 0;
  margin: 0;
  width: 19.5rem;
  height: 100%;
  background: #002450;
  border: rgb(55, 56, 154) 2px solid;
  box-shadow: inset 0px 0px 10px rgb(53, 98, 154);
}

/*卡片底部*/
::v-deep .el-card.is-always-shadow {
  background: #002450;
  border: rgb(55, 56, 154) 2px solid;
}

::v-deep .el-card__body h4 {
  color: white;
  text-align: left;
  margin-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

::v-deep .el-card__body p {
  color: white;
  text-align: left;
  margin-left: 1rem;
  margin-top: 0.3rem;
}</style>

